<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dexter, an Open Source Framework for Entity Linking</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="an Open Source Framework for Entity Linking">
    <meta name="author" content="Diego Ceccarelli">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/dexter.js"></script>
	
    <!-- Le styles -->
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
	  
    </style>
	
    <link href="./bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
	
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png"> -->
		<style type="text/css" media="screen">
			img {
				text-align: center;
			}
			body {
				font-size:12px;
				font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
			
			}
		
			#header{
				text-align:center;
			}
		
		
		
			textarea {
				width: 350px;
				height: 300px;
				border: 3px solid #cccccc;
				padding: 5px;
				font-size:12px;
				color:#222;
				background:#fff;
				font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
		
			}
		
			a {
			  text-decoration: none;
			  color: rgb(213,26,17); /*#007edf;*/
			  text-shadow: none;

			  transition: color 0.5s ease;
			  transition: text-shadow 0.5s ease;
			  -webkit-transition: color 0.5s ease;
			  -webkit-transition: text-shadow 0.5s ease;
			  -moz-transition: color 0.5s ease;
			  -moz-transition: text-shadow 0.5s ease;
			  -o-transition: color 0.5s ease;
			  -o-transition: text-shadow 0.5s ease;
			  -ms-transition: color 0.5s ease;
			  -ms-transition: text-shadow 0.5s ease;
			}
			#output {
				display:none;
			}
		
			a:hover {
			  color: rgb(213,26,17);
			  text-shadow: rgb(213,26,17) 0px 0px 2px;
			}
		
			#result {
				width: 400px;
				height: 300px;
				border: 3px solid #cccccc;
				padding: 5px;
		
			}
		
			img.fb { 
			    float: left; 
			    margin: 4px; 
			}
		

		</style>
	</head>

  <body>
	 
	
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
		 
          <a class="brand" href="/">Dexter - DEMO</a>
		 
        </div>
		 <a href="https://github.com/diegoceccarelli/dexter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
      </div>
    </div>

    <div class="container">
		<div class="row">
			<div id='header' class="span12">
			
				<img width="260" alt="Dexter" src="img/dexter.png" />
	
			</div>
		</div>
	<br/>
	<br/>
	<br/>
		<div class='row'>
			<div id='textbox' class="span8">
					<div id='input'>
						<form name="form">
						<textarea id="inputtext">
Dexter is an American television drama series which debuted on Showtime on October 1, 2006. The series centers on Dexter Morgan (Michael C. Hall), a blood spatter pattern analyst for the fictional Miami Metro Police Department (based on the real life Miami-Dade Police Department) who also leads a secret life as a serial killer. Set in Miami, the show's first season was largely based on the novel Darkly Dreaming Dexter, the first of the Dexter series novels by Jeff Lindsay. It was adapted for television by screenwriter James Manos, Jr., who wrote the first episode. Subsequent seasons have evolved independently of Lindsay's works.
						</textarea>
						<br/>
						<input type="button" value="dexterize!" onClick="annotateText();">
					</form>
					</div> <!-- /input -->
				<div id='output'>
						<div id='result'>
						
						</div>
						<input type='button' value='reset!' onClick='reset();'>
			
				</div> <!-- output -->
			</div> <!-- texbox -->
			<div id='info' class="span4">
				
				We introduce <em>Dexter</em>, an open source framework for entity linking. The entity linking task aims at identifying all the small text fragments in a document referring to an entity contained in a given knowledge base, e.g., Wikipedia. The annotation is usually organized in three tasks. Given an input document the first task consists in discovering the fragments that could refer to an entity (aka spots). Since a spot could refer to multiple entities, it is necessary to perform a disambiguation step, where the correct entity is selected among the candidates. Finally, discovered entities are ranked by some measure of relevance.
				
				In this demo you can try to annotate documents, please use the buttons <pre>dexterize!</pre> to annotate and <pre>reset!</pre> to insert new documents to annotate. 
				If you move the mouse over a spot (highlighted in red) you will see detailed information on the linked entity. 
				
			</div>
	
		</div> <!-- row --> 
		
    </div> 


		
  </body>
</html>

